html {font-size:calc(100vw / 7.5);}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, menu, nav, section {margin:0; padding:0 }
body, button, input, select, textarea {font:400 14px/1.5 "微软雅黑", "Microsoft YaHei", Helvetica, sans-serif;}
article, aside, details, figcaption, figure, footer, header, menu, nav, section, iframe {display:block }
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight:500 }
address, cite, dfn, em, var, i {font-style:normal; font-weight:400 }
dfn {font-family:Arial;}
ul, ol {list-style:none;}
a {color:#000; text-decoration:none }
a:hover {-webkit-transition:color .2s linear; -moz-transition:color .2s linear; -ms-transition:color .2s linear; -o-transition:color .2s linear; transition:color .2s linear }
fieldset, img, button, input {border:0 }
button, input, select, textarea {font-size:100%; outline:none;}
table {border-collapse:collapse; border-spacing:0 }
input {-webkit-appearance:none; border-radius:0; width:100%; height:42px; border:0; padding:0 5px; background:transparent; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box; outline:0 }
/*清除浮动*/
.clearfix:after{
	content: '';
	height: 0;
	display: block;
	clear: both;
	visibility: hidden;
}
.clearfix{
	*zoom:1;
}


html,body{
    width:100%;
    height:100%;
}


/* 首页 */
.gzl_play_solstice{
    width:100%;
    height:100%;
    background: url(../images/cover_bg.jpg) no-repeat top center;
    background-size: 100% 100%;
}
.cover_tit{
    width:90%;
    margin-left:5%;
    padding-top: 5%;
}
.cover_btn_box{
    width:100%;
    position: absolute;
    bottom: 5%;
    text-align: center;
}
.t_btn{
    width:80%;
    margin-left:10%;
    text-align: left;
}
.t_btn img{
    width:45%;
}
.trophy_btn{
    float: right;
}
.regular_btn{
    width:25%;
}
.pop_ups{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    display: none;
}
.pop_ups_bg{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    background-color: #000;
    opacity: 0.7;
}
.pop_ups_box{
    width:90%;
    margin-left: 5%;
    margin-top: 20%;
    position: relative;
    z-index: 3;
}
.close{
    width: 12%;
    position: absolute;
    z-index: 4;
    top: 10%;
    right: 6%;
}
.trophy_box .pop_ups_box{
    width:86%;
    margin-left: 7%;
}
.qq_share_box .pop_ups_box{
    width:96%;
    margin-left: 2%;
    margin-top: 2%;
}









/* 游戏页 */
.gzl_solstice{
    width:100%;
    height:100%;
    background: url(../images/bg.jpg) no-repeat top center;
    background-size: 100% 100%;
}

/* 关注 */
.bomb_box{
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left:0;
    z-index: 999;
    display: none;
}
.bomb_box_bg{
    width:100%;
    height: 100%;
    position: absolute;
    top: 0;
    left:0;
    background-color: #000;
    opacity: 0.7;
    filter: alpha(opacity=70);
}
.follow_qr{
    width: 50%;
    position: relative;
    top: 20%;
    left: 25%;
    z-index: 9;
}
.qr_tip{
    width: 90%;
    position: relative;
    top: 25%;
    left: 5%;
    z-index: 9;
}


/* 春暖花开 */
.finish_box{
    /* display: block; */
}
.flower_box{
    width: 100%;
    height: 40%;
    position: relative;
    margin-top: 20%;
    overflow: hidden;
}
.flower{
    width: 15%;
    position: absolute;
    /* left: 0%;
    top: 10%; */
}
.congratulations{
    position: relative;
    width: 80%;
    left: 10%;
    margin: 10% 0%;
}
.lottery{
    position: relative;
    width: 50%;
    left: 25%;
}

/* 没有机会了 */
.no_chance_box{
    /* display: block; */
}
.no_chance_bg{
    width: 86%;
    height: 41%;
    position: absolute;
    left: 7%;
    top: 25%;
    background: url(../images/noChance_box.png) no-repeat top center;
    background-size: 100%;
}
.more_surpise{
    width: 40%;
    position: absolute;
    top: 53%;
    left: 30%;
}


/* 游戏失败 */
.fail_box{
    /* display: block; */
}
.fail_bg{
    width: 86%;
    height: 50%;
    position: absolute;
    left: 7%;
    top: 20%;
    background: url(../images/fail_bg.png) no-repeat top center;
    background-size: 100%;
}
.fail_tiptxt{
    position: relative;
    top: 24%;
    width: 85%;
    height: 20%;
    left: 10%;
}
.fail_tiptxt img{
    float: left;
    /* width: 20%; */
    height: 90%;
}
.remain_num{
    float: left;
    color: #702b3d;
    font-size: 22px;
    line-height: 100%;
}
.share_btn{
    width: 36%;
    position: absolute;
    left: 30%;
    top: 68%;
}
.shareTip{
    position: relative;
    width:96%;
    margin-left: 2%;
    margin-top: 2%;
    display: none;
}

/* 3s倒数 */
.countdown_three{
    width: 100%;
    height: 100%;
    position: absolute;
    left:0%;
    top:0%;
    z-index: 988;
    /* display: none; */
}
.countdown_three_bg{
    width: 100%;
    height: 100%;
    position: absolute;
    left:0%;
    top:0%;
    background-color: #000;
    opacity: 0.7;
}
.three_second{
    width: 35%;
    height: 35%;
    position: absolute;
    left:32%;
    top:25%; 
    background: url(../images/num_second.png) no-repeat;
    background-size: 300%;
    background-position: 100% 0%;
}
.one_s{
    background-position: -20% 0%;
}
.two_s{
    background-position: 40% 0%;
    background-size: 300%;
}
.three_s{
    background-position: 100% 0%;
    background-size: 300%;
}
.start_bg{
    /* display: none; */
    width: 84%;
    height: 52%;
    text-align: center;
    position: absolute;
    left:8%;
    top:25%;
    background: url(../images/start_bg.png) no-repeat top center;
    background-size: 100%;
}
.start{
    width:50%;
    position: relative;
    top: 58%;
}


/* 时间沙漏 */
.time_score_box{
    width:100%;
    height: 10%;
}
.time_box{
    display: inline-block;
    width:45%;
    height:100%;
    padding: 1% 2%;
}
.hourglass{
    width:22%;
    /* vertical-align: bottom; */
    float: left;
    margin-top: 3%;
}
.countclock{
    /* font-size: 30px;
    color: #fff;
    float: left;
    margin-top: 3%; */
    width: 70%;
    height: 55%;
    float: left;
    margin-top: 7%;
}
.clock_num{
    float: left;
    width: 20%;
    height: 100%;
    margin-right: -4%;
    background: url(../images/time_score_num.png) no-repeat;
    background-position: 0% 0%;
    background-size: 940%;
}
.clock_num_two{
    background-position: 22% 0%;
}
.countclock .top_num{
    float: left;
    width: 10%;
    margin-left: 4%;
    background: url(../images/top.png) no-repeat top center;;
    background-size: 100%;
}
.score_box{
    /* display: inline-block; */
    width:45%;
    height: 65%;
    margin-top: 4%;
    float: right;
}
.score_tit{
    width:45%;
    float: left;
    /* margin-top: 6%; */
}
.score_num{
    float: left;
    width:15%;
    height: 100%;
    margin-right: -4%;
    margin-top: -1%;
    background: url(../images/time_score_num.png) no-repeat;
    background-position: 0% 0%;
    background-size: 950%;
}
.score_num:first-child{
    margin-left: -4%;
}

/* 游戏区域 */
.container{
    width:100%;
    height:60%;
}
.container table{
    display: inline-block;
    width: 90%;
    height: 100%;
    margin-left: 5%;
	border:0px solid #f0f0f0;
    border-collapse:collapse;
    background: url(../images/table_bg.png) no-repeat top center;
    background-size: 100% 100%;
}
.container table tbody{
    display: inline-block;
    height: 100%;
}
.container table tr{
	display: flex;
	display: -webkit-flex;
    flex-wrap: wrap;
    height:18.8%;
}
.container table tr:first-child, .container table tr:last-child{
    height: 3.0%;
}

.container table td {
	box-sizing: border-box;
	width:10%;
	height: 100%;
	/* padding:2px; */
	/* width:45px;height:48px; */
	border:0px solid #f0f0f0;
	border-collapse:collapse;
	text-align:center;
    /* padding:2px; */
    
}
.container table .td_bg{
    width: 20%;
    /* background: url(../images/td_bg.png) no-repeat top center;
    background-size: 100% 100%; */
}
.container table td img {
	cursor:pointer;
	width:100%;
	/* height: 100%; */
}


/* 铲雪区 */
.shovel_snow{
    width:100%;
    height: 18%;
    position: relative;
    top: 2%;
}
.shovel_snow  span{
    width:26%;
    position: relative;
    z-index: 9;
    background: url(../images/monkey.png) no-repeat;
    /* background: url(../images/monkey.png) no-repeat 119% 80%; */    
    height: 100%;
    display: inline-block;
    /* background-size: 186%; */
    background-size: 565%;
}
.shovel_snow .monkey1{
    background-position: 0% 50%;
}
.shovel_snow .monkey2{
    /* background-position: 119% 80%; */
    background-position: 21.6% 50%;
}
.shovel_snow .monkey3{
    background-position:44.4% 50%;
}
.shovel_snow .monkey4{
    background-position: 64.9% 80%;
    background-size: 620%;
}
.shovel_snow .monkey5{
    background-position: 84.5% 80%;
    background-size: 620%;
}
.shovel_snow .monkey6{
    background-position: 105% 80%;
    background-size: 620%;
}
.snowball_box{
    display: inline-block;
    width: 79%;
    height: 30%;
    position: absolute;
    left: 20%;
    bottom: 6%;
}
.snowball{
    display: inline-block;
    margin-right: -4px;
    width:11%;
    position: absolute;
}
.snowball1{
    left:0%;
}
.snowball2{
    left:11%;
}
.snowball3{
    left:22%;
}
.snowball4{
    left:33%;
}
.snowball5{
    left:44%;
}
.snowball6{
    left:55%;
}
.snowball7{
    left:66%;
}
.snowball8{
    left:77%;
}
.snowball9{
    left:88%;
}
.snowball_animation{
    animation:snowball_animate 0.4s 0.2s linear forwards;
    -webkit-animation:snowball_animate 0.4s 0.2s linear forwards;
    -moz-animation:snowball_animate 0.4s 0.2s linear forwards;
    -o-animation:snowball_animate 0.4s 0.2s linear forwards;
    /* transform:translate(-300%,-500%); */
}


/* 加1分 */
.add_one_score{
    width: 20%;
    height: 20%;
    position: absolute;
    left: 50%;
    top: 50%;
}
.add_one_score img{
    width: 50%;
}







/* 雪球抛物线 */
@keyframes snowball_animate {
	0% {
        transform:translate(0%,0%);
    }	 
    50%{
        transform:translate(-150%,-300%);
    }
    90% {
        opacity: 0.9;
	}
	100% {
        transform:translate(-300%,-500%);
        opacity: 0;
	}
}
@-webkit-keyframes snowball_animate {
	0% {
        transform:translate(0%,0%);
    }	 
    50%{
        transform:translate(-150%,-300%);
    }
    90% {
        opacity: 0.9;
	}
	100% {
        transform:translate(-300%,-500%);
        opacity: 0;
	}
}
@-moz-keyframes snowball_animate {
	0% {
        transform:translate(0%,0%);
    }	 
    50%{
        transform:translate(-150%,-300%);
    }
    90% {
        opacity: 0.9;
	}
	100% {
        transform:translate(-300%,-500%);
        opacity: 0;
	}
}
@-o-keyframes snowball_animate {
	0% {
        transform:translate(0%,0%);
    }	 
    50%{
        transform:translate(-150%,-300%);
    }
    90% {
        opacity: 0.9;
	}
	100% {
        transform:translate(-300%,-500%);
        opacity: 0;
	}
}